Skip to main content

HTML Forms

To acquire user input, an HTML form is employed. Most user input is sent to a server for processing.

The <form> Element​

The HTML <form> element creates an HTML form.

Example
<form>. form elements .</form>

How Are Forms Used?​

Forms have several applications . Comment response forms, order input forms, subscription forms, registration forms, and customization forms are the most common.

The <form> element serves as a container for various input components like text fields, checkboxes, radio buttons, submit buttons, and so on.

The <input> Element​

The most common form element is the HTML <input>element.

Depending on the type attribute, an <input> element can be presented in a variety of ways.

Here are some examples:

TypeDescription
<input type="text">Displays a single-line text input field
<input type="radio">Displays a radio button (for selecting one of many choices)
<input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">Displays a submit button (for submitting the form)
<input type="button">Displays a clickable button

Text Fields​

The <input type="text"> defines a single-line input field for text input.

Example
<form>
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" />
</form>
Loading...

The <label> Element​

In the above example, the <label> element is used.

The <label> tag defines a label for many form elements.

The <label> element is important for screen-reader users since the label is read aloud by the screen-reader when the user focuses on the input element.

Because clicking the text within the <label> element toggles the radio button/checkbox, it also helps users who have difficulties clicking on very small areas (such as radio buttons or checkboxes).

To connect them, the for attribute of the <label> tag should be identical to the id attribute of the <input> element.

Radio buttons​

The <input type="radio"> defines a radio button.

A radio button allows a user to pick ONE of a limited number of options.

Example

A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>
Loading...

Checkboxes​

The <input type="checkbox"> defines a checkbox.

Checkboxes allow a user to pick ZERO or MORE options from a restricted set of choices.

Example

A form with checkboxes

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1"> I have a bike</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2"> I have a car</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3"> I have a boat</label>
</form>
Loading...

The Submit button​

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server that contains a script for processing input data.

The form-handler is specified in the form's action attribute.

Example

A form with a submit button:

<form action="/action_page.php">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
  <input type="submit" value="Submit" />
</form>
Loading...

The Name Attribute for <input>​

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" value="John" /><br /><br />
  <input type="submit" value="Submit" />
</form>
Loading...